<template>
  <div class="content-head xui-fc">
    <h2 class="content-title xui-fl">{{title}}</h2>
    <ul class="footprint xui-fr xui-fc">

      <li v-if="isEN" class="xui-fl"><router-link :to="{name: 'home'}">Home</router-link></li>
      <li v-else class="xui-fl"><router-link :to="{name: 'home'}">首页</router-link></li>
      <li class="xui-fl" v-for="(item,index) in footprint" :key="index"><router-link :to="{name: item.name}">{{item.title || '详情页'}}</router-link></li>
    </ul>
  </div>
</template>

<script>
import { getLang } from "@/utils/lang";
export default {
  props: {
    title: String
  },
  computed: {
    SiteMap() {
      return this.$store.getters.siteMap;
    },
    footprint() {
      let routeRecord = this.$route.matched;
      let result = [];
      let fun = (item, name) => {
        if (item.name === name) {
          result.push(item);
        }
        if (item.children) {
          item.children.forEach(child => {
            fun(child, name);
          });
        }
      };
      routeRecord.forEach(item => {
        this.SiteMap.forEach(i => {
          fun(i, item.name);
        });
      });
      return result;
    },
    isEN() {
      return getLang() == "en";
    }
  }
};
</script>

<style lang="less" scoped>
.content-head {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  .content-title {
    margin-bottom: 0;
    border-left: 3px solid #bf9c51;
    font-size: 26;
    line-height: 1.1;
    padding-left: 10px;
  }
  .footprint {
    line-height: 26px;
    li {
      font-size: 14px;
      a:hover {
        color: #905223;
      }
    }
    li:after {
      content: ">";
      margin: 0 5px;
      color: #aaa;
    }
    li:last-child {
      a {
        color: #905223;
      }
    }
    li:last-child:after {
      content: "";
    }
  }
}
</style>

